<!--<html>
<head>
    <style type = "text/css">
        #demo {
            width: 300px;
            border: 5px solid black;
        }
        #box0 {
            width: 20px;
            height: 200px;
            background: green;
            float: left;
        }
        #box{
            width:150px;
            height:30px;
            background: #22724B;
            float:left;
        }
        #box1{width:20px;
            margin:auto;
        height: 200px;
        background: #4F8247;
        float: left;
        }
        
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div id="demo">
    <span id="box0">1</span> 
    <span id="box">2</span>
    <span id=box1>3</span>
    <div class="clear"></div> 
    
</div>
</body>
</html> 
-->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

body {

    margin:10px;

    font-family:Arial; font-size:12px;

}

.father {

    background-color:#ffff99;

    border:1px solid #111111;

    padding:5px;                

}

.father p {

    padding:10px;                

    margin:15px;                    

    border:1px dashed #111111;

    background-color:#90baff;

}

.father p {

    border:1px dashed #111111;

    background-color:#ff90ba;

}   

.son1 {

/* 这里设置son1的浮动方式*/
float:left;
width=30px;
height: 100px;
    background: grey;
}

.son2 {

/* 这里设置son1的浮动方式*/
float:left;
    width:1000px;
    background:yellow;
    height:100px;
}

.son3 {

/* 这里设置son1的浮动方式*/
float:left;
    width:30px;
    background: #4C6D7D;
    height:100px;
}
.son4 {
    float: left;
    width =100px;
    height:30px;
    background: yellow;}
.clear{

　　　　　　clear:both;

　　　　　}
</style>

</head>

<body>

    <p class="father">

        <div class="son1">Box-1</div>

        <div class="son2">Box-2</div>

        <div class="son3">Box-3</div>
    
        <div class="clear"></div>
        <div class="son4" 1></div>
<br>
       

</body>

</html>